<template>
    <el-dialog
        title="新闻预览"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div class="batch-push-content">
            <div class="select-content">
                <span>将栏设置为：</span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in columnList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="btns">
                <el-button>取消</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
export default {
  // 组件名称
  name: "ViewNews",
  // 组件参数 接收来自父组件的数据
  props: ['columnList'],
  // 组件状态值
  data() {
    return {
        dialogVisible: false,
        value: ''
        
    };
  },
  created() {
    
  },
  // 组件方法
  methods: {
    open() {
        this.dialogVisible = true;
    },
    handleClose() {
        this.dialogVisible = false;
        this.value = '';
    },
    handleConfirm() {
        this.$emit('handleConfirm', {typeId: this.value, done: this.handleClose})
    }
  }
};
</script>
<style lang="scss" scoped>
    .batch-push-content {

        .select-content {
            display: flex;
            justify-content: start;
            align-items: center;
        }
        .btns {
            margin: 30px 0 20px;
        }
    }
</style>
